<template>
  <div class="assignment-header">
    <img src="@/assets/svgs/left.svg" alt="Back" class="back-button" @click="router.push('/teacher/record/card')"/>
    <span class="correct_header1">已提交{{ feedback_header }}人</span>
  </div>
  <div v-if="loading">正在加载问卷结果...</div>
  <div v-else-if="error">加载失败，请稍后再试</div>
  <div v-else class="satisfaction-survey">

    <div class="satisfaction-chart">
      <div class="serial">
        <div class="serial1">2</div>
        <div class="serial2">满意度 (100满意-0不满意)</div>
      </div>
      <el-table :data="satisfactionData" style="width: 100%;">
        <el-table-column prop="option" label="选项" width="600" />
        <el-table-column prop="count" label="计数" width="300" />
        <el-table-column label="百分比">
          <template #default="scope">
            <div class="demo-progress">
              <el-progress :text-inside="true" :stroke-width="24" :percentage="scope.row.percentage" status="success" :color="customColor" />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { surveyService } from '@/api/feedbackresult';
import {useCounterStore} from "@/stores/counter"

//从pinia获取课程ID
let store = useCounterStore();
const courseManageId=store.courseManageId;
console.log("获取的课程id:",courseManageId);
//获取问卷id
const route = useRoute(); // 获取当前路由对象
const surveyId = ref(null);
surveyId.value = route.params.surveyId; // 从路由参数中获取 surveyId
console.log("获取到的问卷Id:", surveyId.value);

const loading = ref(true);
const error = ref(false);
const satisfactionData = ref([]);

const resultsur = async () => {
    try {
        const response = await surveyService(surveyId.value);
        console.log("API Response:", response); // 打印完整的响应数据

        // 检查 response.data 是否存在
        if (!response.data || !response.data.data) {
            throw new Error("Invalid response data");
        }

        const responseData = response.data.data; // 后端返回的实际数据

        // 检查 satisfactionCount 是否存在
        if (!responseData.satisfactionCount) {
            throw new Error("satisfactionCount is missing in response");
        }

        // 处理满意度数据
        satisfactionData.value = [
            { option: '95-100很满意', count: responseData.satisfactionCount[0], percentage: 0 },
            { option: '90-95满意', count: responseData.satisfactionCount[1], percentage: 0 },
            { option: '80-90较满意', count: responseData.satisfactionCount[2], percentage: 0 },
            { option: '60-80一般', count: responseData.satisfactionCount[3], percentage: 0 },
            { option: '30-60不满意', count: responseData.satisfactionCount[4], percentage: 0 },
            { option: '0-30很不满意', count: responseData.satisfactionCount[5], percentage: 0 }
        ];
// 95-100很满意，90-95满意,80-90较满意，60-80一般', 30-60不满意, 0-30很不满意
        // 计算百分比
        const totalFeedback = responseData.countSum;
        satisfactionData.value = satisfactionData.value.map(item => ({
            ...item,
            percentage: ((item.count / totalFeedback) * 100).toFixed(2)
        }));

        loading.value = false;
    } catch (err) {
        error.value = true;
        ElMessage.error(`获取问卷内容失败，请稍后再试: ${err.message}`);
        console.error('Error:', err);
        loading.value = false;
    }
};

onMounted(() => {
    if (!surveyId.value) {
        ElMessage.error('无效的问卷 ID');
        router.push('/teacher/record/card');
        return;
    }
    resultsur();
});

const router = useRouter();
const feedback_header = ref('1');
const customColor = ref('#13227A');
</script>


<style scoped>
.assignment-header {
    display: flex;
    height: 7lvh;
    width: 99lvw;
    background-color: #13227A;
    color: white;
}

.back-button {
    background-color: transparent;
    width: 3%;
    height: 7lvh;
    color: white;
    cursor: pointer;
}

.correct_header1 {
  margin-left: 89%;
  font-size: 20px;
  font-weight: 700;
  margin-top: 1%;
}

.satisfaction-survey {
  padding: 20px;
  background-color: #ffffff;
}

.satisfaction-chart {
  margin-top: 20px;
}
.demo-progress .el-progress--line {
  max-width: 600px;
}

.serial{
  display: flex;
  width: 100%;
  height: 20px;
}
.serial1{
  float: left;
  color: white;
  background-color: #13227A;
  width: 20px;
  height: 20px;
  text-align: center;
  border-radius: 50%;
}
.serial2{
  margin-left: 5px;
  font-size: 17px;
  font-weight: 700;
}
</style>
